.card {
  height: 90%;
  width: 23%;
  margin: 1%;
  margin-right: 3%;

  position: relative;

  flex-shrink: 0;
}


.card-row {
  display: flex;
  overflow-x: auto;

  border: solid 2px #141414;
  margin: 2%;
  width: 95%;
  height: 20%;
}

.finished-cardrow {
  height: 25%;
  margin-top: 15%;
}

@media (min-width: 768px) {
  .card {
    width: 12%;
    height: 85%;
    margin: 1%;
  }

  .card-row {
    margin-top: 0.75%;
    margin-bottom: 0.75%;
    height: 22%;
    overflow-x: auto;
  }

  .finished-cardrow {
    height: 25%;
    margin-top: 6%;
  }
}

.data {
  position: absolute;
  background-color: white;
  border: 1px solid;
}

/* Data Addition */
.cost, .mine, .block, .power, .atk, .hp, 
.requirements, .reward, .score, .price,
.cost_detailed, .order_effect, .finished_effect {
  background-color: #f4f4f4;
}

.cost {
  top: 0%;
  left: 0%;
  height: 25%;
  width: 25%;
  text-align: center;
}

.mine, .block, .power, .reinforce_material {
  top: -2%;
  left: 0%;
  height: 20%;
  width: 45%;
  text-align: center;
  font-size: 100%;
  overflow: hidden;
}

.block {
  left: 55%;
}

.power, .vulnerable {
  top: 25%;
  width: 35%;
  height: 18%;
  font-size: 90%;
}

.reinforce_material {
  left: 70%;
  width: 30%;
  top: 22%;
  height: 24%;
  /* transform: scale(0.9); */
}

.cost_detailed {
  top: 3%;
  left: 5%;

  height: 15%;
  width: 15%;

  /* height: auto;
  width: auto;
  padding: 0% .5% .5% .5%;
   */
  text-align: center;
  font-size: 200%;
}

.atk {
  top: 78%;
  left: 2%;
  height: 25%;
  width: 25%;
  text-align: center;
}

.hp {
  top: 78%;
  left: 73%;
  height: 25%;
  width: 25%;
  text-align: center;
}

.reward {
  top: 40%;
  left: 67%;
  height: 25%;
  width: 40%;
  text-align: center;
}

.order_effect, .finished_effect {
  top: 2%;
  left: 6%;
  height: 40%;
  width: 100%;
  text-align: center;
  font-size: 70%;
  /* overflow-y: auto; */
  border: 2px solid black;
}

.order_effect {
  top: 90%;
}

.finished_effect {
  top: 5%;
}

.desc {
  top: 61%;
  left: 5%;
  height: 30%;
  width: 90%;
  text-align: center;
  font-size: 80%;
  overflow-y: auto;
}

/* Detailed card addition */
.cost_detailed, .desc {
  border: none;
  background-color: rgba(69, 69, 69, .9);
  box-shadow: 0px 0px 1px grey;
  color: white;
}

.requirements, .price {
  top: -2%;
  left: 2%;
  /* height: 80%; */
  width: 40%;
  text-align: center;
  border: 1.5px solid black;
}

.score {
  top: 2%;
  left: 72%;
  height: 35%;
  width: 35%;
  text-align: center;
  font-size: 135%;
}

.blocked {
  top: 2%;
  left: 75%;
  height: 25%;
  width: 25%;
  text-align: center;
  font-size: 120%;
}

.illust, .e_illust, .o_illust, .illust_detailed, .eo_illust_detailed, .r_illust, .r_illust_detailed, .upgrade_name {
  width: 88%;
  height: 90%;
  margin: 5% 6% 5% 6%;
  overflow: hidden;

  background-color: rgba(0, 0, 0, 0);

}

.illust, .r_illust{
  /* background-color: #e0e0e0; */
  /* background-image: url("https://www.transparenttextures.com/patterns/blu-stripes.png"); */
}



.illust_detailed, .r_illust_detailed, .eo_illust_detailed {
  border: 0px;
  background-color: rgba(0, 0, 0, 0);
}

img.illust {
  width: 350%;
  height: auto;
  margin-left: -120%;
}

img.r_illust {
  width: 350%;
  height: auto;
  margin-left: -120%;
  margin-top: -200%;
  transform: scaleY(-1);
}

img.e_illust, img.eo_illust_detailed {
  width: 100%;
  height: auto;
  margin-left: 0%;
}

/* img.o_illust {
  width: 140%;
  height: auto;
  border: 0px;
}  */

img.rhine_illust {
  width: 100%;
  height: auto;
  margin-left: 0%;
  margin-top: 30%;
}

img.o_illust {
  width: 300%;
  height: auto;
  margin-left: -45%;
  margin-top: -20%;
}

img.illust_detailed, img.r_illust_detailed {
  width: 200%;
  height: auto;
  margin-left: -50%;
  border: 0px;
}

img.r_illust_detailed {
  transform: rotate(90deg);
  margin-left: -100%;
  margin-top: -50%;
}

.upgrade_name {
  text-align: center;
}

.check-card {
  height: 55%;
  width: 95%;
  margin-top: 20%;
}

.card-detailed {
  height: 95%;
  width: 60%;
  border: solid 2px #141414;
  margin: 2%;

  position: relative;
  flex-shrink: 0;
}

.card-detailed-row {
  display: flex;
  overflow-x: auto;
  position: relative;
  /* TODO: align items to center when there's only one card, items-align does not work, this is essential for combining SCardRow and CardDetailed */

  border: solid 2px #141414;
  margin: 2%;
  width: 95%;
  height: 60%;
  margin-top: 25%;
}

.order-card {
  height: 70%;
  margin-right: 5%;
}

@media(min-width: 768px) {
  .card-detailed-in-row {
    height: 92%;
    width: 25%;
    margin: 1.5%;
  }
  
  .card-detailed-row {
    margin-top: 10%;
    height: 70%;
    width: 110%;
  }

  .order-card {
    margin-right: 2.2%
  }
}

.card-detailed-button {
  font-size: 105%;
  margin-top: 5%;
}

.type-filter-container {
  font-size: 150%;
  height: 20%;
  width: 61.8%;
  margin-left: 10%;

  display: inline-flex;
  vertical-align: top;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;

  /* border: 1px solid; */
}

.type-filter {
  height: 38%;
  width: 20%;
  /* height: 30px; */
  /* width: 30px; */

  /* border: 3px solid grey; */
}

.type-filter-img {
  height: 100%;
  width: 100%;
}